import { Image, Typography, Space, Button, message } from "antd";
import { FieldType } from "@/api/services/taskService";
import parse, {
	HTMLReactParserOptions,
	Element,
	domToReact,
} from "html-react-parser";
import { CopyOutlined } from "@ant-design/icons";

interface FieldDisplayProps {
	fieldType: string;
	value: string;
}

const FieldDisplay = ({ fieldType, value }: FieldDisplayProps) => {
	if (!value) return null;

	switch (fieldType as FieldType) {
		case FieldType.RICHTEXT:
			const options: HTMLReactParserOptions = {
				replace: (domNode) => {
					if (domNode instanceof Element && domNode.name === "img") {
						const src = domNode.attribs.src;
						return (
							<div onClick={(e) => e.stopPropagation()}>
								<Image.PreviewGroup
									preview={{
										mask: "点击查看大图",
									}}
								>
									<Image
										src={src}
										alt={domNode.attribs.alt || ""}
										style={{
											maxWidth: "100px",
											maxHeight: "100px",
											objectFit: "contain",
											borderRadius: "4px",
											cursor: "pointer",
										}}
									/>
								</Image.PreviewGroup>
							</div>
						);
					}
				},
			};

			const copyHtml = async (event: React.MouseEvent) => {
				try {
					event.stopPropagation();
					const blob = new Blob([value], { type: "text/html" });
					const clipboardItem = new ClipboardItem({
						"text/html": blob,
						"text/plain": new Blob([value], { type: "text/plain" }),
					});
					await navigator.clipboard.write([clipboardItem]);
					message.success("HTML内容已复制");
				} catch (err) {
					// 如果高级API不支持，回退到基础复制
					try {
						await navigator.clipboard.writeText(value);
						message.success("HTML内容已复制");
					} catch (error) {
						message.error("复制失败");
					}
				}
			};

			return (
				<div style={{ position: "relative" }}>
					<Button
						type="text"
						icon={<CopyOutlined />}
						onClick={copyHtml}
						style={{
							position: "absolute",
							right: 0,
							top: 0,
							padding: "4px 8px",
						}}
						title="复制HTML内容"
					/>
					<div
						className="rich-text-content"
						style={{
							padding: "8px",
							background: "#f5f5f5",
							borderRadius: "4px",
						}}
					>
						{parse(value, options)}
					</div>
				</div>
			);

		case FieldType.IMAGE:
			return (
				<Space direction="vertical" size="small">
					<Image
						src={value}
						alt="上传图片"
						style={{
							maxWidth: "100px",
							maxHeight: "100px",
							objectFit: "contain",
							borderRadius: "4px",
							cursor: "pointer",
						}}
						preview={{
							mask: "点击查看大图",
						}}
					/>
					<Typography.Link
						href={value}
						target="_blank"
						style={{ fontSize: "12px" }}
					>
						查看原图
					</Typography.Link>
				</Space>
			);

		case FieldType.FILE:
			return (
				<Typography.Link
					href={value}
					target="_blank"
					style={{ display: "inline-flex", alignItems: "center", gap: "4px" }}
				>
					<span style={{ fontSize: "14px" }}>📎</span>
					查看文件
				</Typography.Link>
			);

		case FieldType.TEXTAREA:
			return (
				<Typography.Paragraph
					style={{
						whiteSpace: "pre-wrap",
						margin: 0,
						background: "#f5f5f5",
						padding: "8px",
						borderRadius: "4px",
						fontSize: "14px",
					}}
				>
					{value}
				</Typography.Paragraph>
			);

		case FieldType.SELECT:
		case FieldType.RADIO:
		case FieldType.CHECKBOX:
			try {
				const parsedValue = JSON.parse(value);
				if (Array.isArray(parsedValue)) {
					return (
						<Typography.Text>
							{parsedValue.map((item, index) => (
								<span key={index}>
									{item}
									{index < parsedValue.length - 1 ? "、" : ""}
								</span>
							))}
						</Typography.Text>
					);
				}
				return <Typography.Text>{parsedValue}</Typography.Text>;
			} catch {
				return <Typography.Text>{value}</Typography.Text>;
			}

		case FieldType.NUMBER:
			return (
				<Typography.Text style={{ fontFamily: "monospace" }}>
					{value}
				</Typography.Text>
			);

		case FieldType.TEXT:
		default:
			return <Typography.Text>{value}</Typography.Text>;
	}
};

export default FieldDisplay;
